<template>
  <div class="view-wrapper">
    <div class="main">
			<div class="typeBox">
        <div class="lfBox">
          <el-button type="primary"  @click="back">返回档案列表</el-button>
          <div class="name">{{info.clientName}}</div>
        </div>
				<div class="btnBox" v-if="prevType == 'index'">
          <el-button type="primary"  @click="delClient">删除客户</el-button>
          <el-button type="primary"  @click="customerFollowUp">客户跟进</el-button>
          <el-button type="primary"  @click="editClick">编辑客户信息</el-button>
          <el-button type="primary"  @click="editServeClick('edit')" v-if=" info.signStatus == '已签约'">编辑服务信息</el-button>
          <el-button type="primary"  @click="editServeClick('editType')" v-if=" info.signStatus == '待签约'">修改签约状态</el-button>
				</div>
			</div>
      <div class="textList">
        <div class="list">客户负责人：{{ info.responsiblePerson }}</div>
        <div class="list">客户级别：{{ info.clientLevel }}</div>
				<div class="list">签约状态：{{ info.signStatus }}</div>
        <div class="list">服务状态：{{ info.status }}</div>
				<div class="list">服务完成度：{{ info.completionRate }}</div>
        <div class="list">最后更新时间：{{ info.updateTime }}</div>
      </div>
    </div>
    <div class="main">
      <div class="main_top_info">
        <div class="lef">
          <div
            class="nav_list"
						:class="item.id == currentNavtab ? 'active' : ''"
            v-for="item in typeList"
            :key="item.id"
            :value="item.id"
            @click="handleTab(item.id)"
          >
			<div class="txt">{{ item.value }}</div>
			<div class="xian" v-if="item.id == currentNavtab"></div>
          </div>
        </div>
      </div>
			<info v-if="currentNavtab == 1" ref="childInfo"></info>
			<followRecord v-if="currentNavtab == 2"></followRecord>
			<refundRecord v-if="currentNavtab == 3"></refundRecord>
			<serveRecord v-if="currentNavtab == 4"></serveRecord>
			<operateRecord v-if="currentNavtab == 5"></operateRecord>
			<history v-if="currentNavtab == 6"></history>
			<Dialog v-bind="$attrs" v-if="dialogVisible" :id="id" :pathType="pathType" :visible.sync="dialogVisible" @success="_handleSuccess" />
			<ServeDialog v-bind="$attrs" v-if="servedialogVisible" :id="id" :pathType="pathServeType" :visible.sync="servedialogVisible" @success="_handleSuccess"></ServeDialog>
    </div>
  </div>
</template>
        
    <script>
import Loading from "@/components/Loading/index";
// api

import {
	clientBase,
  delClient,
} from "@/api/customer/customerFile";
import {
	userInfo
} from "@/api/customer/reportingForm";
import { getToken } from '@/utils/auth'

import ExportExcelButton from "@/components/ExportExcelButton/index";
import info from "./tabs/info";
import followRecord from "./tabs/followRecord";  
import refundRecord from "./tabs/refundRecord";
import serveRecord from "./tabs/serveRecord";
import operateRecord from "./tabs/operateRecord"; 
import history from "./tabs/history"; 
import Dialog from "./components/dialog";  
import ServeDialog from "./components/serveDialog";


export default {
  name: "",
  components: {
		Dialog,
		ServeDialog,
		info,
		followRecord,
		refundRecord,
		serveRecord,
		operateRecord,
		history,
	},
  data() {
    return {
			dialogVisible: false,
			servedialogVisible: false,
			pathType: 'edit',
			pathServeType: 'edit',
			typeList: [
				{id: '1', value: '客户资料'},
				{id: '2', value: '跟进记录'},
				{id: '3', value: '回款'},
				{id: '4', value: '服务记录'},
				{id: '5', value: '操作记录'},
				{id: '6', value: '历史合同'},
			],
      info: {},
			currentNavtab: 1,
			isResponsible: 1,//是否负责人 1 否 2 是
			prevType: '',
    };
  },
  computed: {
  
   
  },
  created() {
    this.id = this.$route.query.id;
		this.prevType = this.$route.query.pathType
    this.getDetail()
    // this.getInfo();
  },
  methods: {
    //获取活动状态字典
    getStatusList() {
      var dictType = "equity_function_type";
      this.$getSelectList(dictType)
        .then((res) => {
          var arr = [
            {
              id: "",
              value: "全部",
            },
          ];
          this.functionTypeList = arr.concat(res.result[0].dictList);
        })
        .finally(() => {});
    },
    //切换选项
    handleTab(id) {
      this.currentNavtab = id;
      this.$forceUpdate();
    },
		getList(){

		},
    //获取详情
    getDetail(){
      var id = this.id
      clientBase(id).then(res => {
        
        var data = res.result
        this.info = data
        Object.keys(this.info).forEach(key => {
          if (this.info[key] === '') {
            this.info[key] = '-'
          }
        })
      })
    },
		addClick(){},
		//编辑客户信息
		editClick(){
			this.dialogVisible = true
			this.pathType = 'edit'
		},
		//编辑服务信息
		editServeClick(data){
			if(data == 'edit'){
				this.pathServeType = 'edit'
			}else{
				this.pathServeType = 'editType'
			}
			this.servedialogVisible = true
		},
    //返回上一页
    back(){
      // this.$router.back(-1)
      this.$router.push({ path: "/customerFile" });
    },
    //删除客户
    delClient(){
      this.$confirm('是否确认将客户档案移除', '删除客户', {
          confirmButtonText: '确认提交',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delClient(this.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.$router.go(-1)
          })
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
		// 客户跟进
		async customerFollowUp() {
				try {
						var res = await userInfo()
						let result = res.result
						this.isResponsible = result.isResponsible
						//是否负责人 1 否 2 是
						
						if (this.isResponsible == 2) {
								console.log('process.env.VUE_APP_CUSTOM_URL', process.env.VUE_APP_CUSTOM_URL)
								// let url = 'http://192.168.0.118:8086/sysh5/#/pages/customerFollowUp/customerFollowUp?token=' + getToken() + '&id='+this.id
								let url = process.env.VUE_APP_CUSTOM_URL + '/sysh5/#/pages/customerFollowUp/customerFollowUp?token=' + getToken() + '&id='+this.id
								window.open(url, '_blank');
								// window.onload = 
						} else {
								this.$message.error('暂无权限')
						}
				} catch (error) {

				}
		},
		_handleSuccess(e) {
			//成功回调
			// this.resetQuery()
			this.getDetail()
			this.$refs.childInfo.getDetail()
		},
  },
};
</script>
  <style lang="scss" scoped>
.main {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 14px;
	.typeBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20px;
    .lfBox{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .name{
        margin-left: 18px;
        font-size: 20px;
        font-weight: bold;
        color: #333;
      }
    }
		
	}
}
.textList{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 40px;
	.list{
		flex: 1;
	}
}
.main_top_info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 14px;
  color: #333;
  background: #fff;
  border-radius: 6px;
  padding: 20px 10px 0 10px;
  .lef {
    display: flex;
    justify-content: flex-start;
    height: 44px;
    .nav_list {
     cursor: pointer;
			margin-right: 50px;
			.txt{
				font-size: 18px;
				font-weight: bold;
				color: #333;
			}
			.xian{
				width: 100%;
				height: 4px;
				border-radius: 6px;
				background: #1890ff;
				margin-top: 12px;
			}
    }
		.active{
			.txt{
				color: #1890ff !important;
			}
		}
    
  }
}
</style>
        